<template>
	
	
	<view class="">
		<!-- 导航 -->
		<uni-nav-bar  
		  backgroundColor="#fff" 
		  class="tabber" 
		  color="#666" 
		  @clickRight="showMenu" 
		  @clickLeft="welcome">
				<view class="title">面朝大海，春暖花开</view>
			    <view slot="left" class="">春暖阅读</view>
			    <view slot="right" class=" ai-center"> <uni-icons type="more-filled" size="44" color="#666"></uni-icons> </view>
		</uni-nav-bar>
		
		
	
	<view class="center">
	
	
		
		<!-- 首选书籍 -->
		<book-Thubnail></book-Thubnail>
		
		<!-- item卡片 -->
		<book-Card  
		  @checkedBooks="checkedBooks" 
		  :isHidde="isHidde" 
		  ref='BookCard'></book-Card>
	
		<!-- 菜单弹出层 -->
		<chunLei-popups 
		  theme="light" 
		  v-model="value" 
		  :popData="menu" 
		  @tapPopup="tapPopup" 
		  :x="344" :y="30" 
		  placement="top-end">
		</chunLei-popups>
	
		
		<!-- 自定义组件 任意位置的弹出框 ，内容由用户指定 -->
		<book-drawer 
		  id="dranews" 
		  @tabBarHide="tabBarHide" 
		  @sortList="sortList"></book-drawer>
		<book-buttom 
		  id="buttoms" 
		  :selcetCount='checkedbooks' 
		  @delet="delet"></book-buttom>
		<delete-comfim id="comfor" @deleteCancel="deleteCancel"></delete-comfim>
	
			
		
		
	</view>
		
	</view>
	
</template>

<script>
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import bookCard from '@/components/book-card/book-card.vue'
	import bookThubnail from '@/components/book-card/book-thubnail.vue'
	import bookDrawer from '@/components/book-card/book-drawer.vue'
	import bookButtom from '@/components/book-card/book-buttom.vue'
	import deleteComfim from '@/components/book-card/delete-comfim.vue'
	
	
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			chunLeiPopups,
			bookCard,
			bookThubnail,
			bookDrawer,
			bookButtom,
			deleteComfim
			
		},
		data() {
			return {
				menu: [{
					title:'搜索',
					icon:'/static/image/shelf/zhifeiji.png'
				},{
					title:'整理书架',
					icon:'/static/image/shelf/zhifeiji.png'
				}],
				value:false,
				checkedbooks:[],
				maskes:false,
				isHidde:true,
			}
		},
		methods: {
			showMenu() {
				this.value = !this.value
			},
			tapPopup(e){
				if(e.title == '整理书架' ){
						this.isHidde = !this.isHidde
						if(!this.isHidde){
							uni.hideTabBar({animation:true})
							let elm= document.getElementById("dranews").firstElementChild
							this.$animationUtils.Animation(elm,{"top":0})
						return
				}
				uni.showTabBar({animation:true})
				return
				}
				
				
				
			},
			checkedBooks(value){
				this.checkedbooks = value
				console.log(this.checkedbooks)
			
			},
			showCount(){
			},
			delet(){
				let elm= document.getElementById("comfor").firstElementChild
				this.$animationUtils.Animation(elm,{"bottom":0})
			},
			hiddenAll(){
				const hiddenButtom = () => {
					let elm = document.getElementById("buttoms").firstElementChild
					this.$animationUtils.Animation(elm,{"bottom":-45})
				}
				hiddenButtom()
				
				const hiddenComfim = () => {
					let elm= document.getElementById("comfor").firstElementChild
					this.$animationUtils.Animation(elm,{"bottom":-100})
				}
				hiddenComfim()
				
				this.isHidde = !this.isHidde
				if(this.isHidde){
					let elm = document.getElementById("dranews").firstElementChild
					this.$animationUtils.Animation(elm,{"top":-45})
					uni.hideTabBar({animation:true})
				return
				}
				
			},
			deleteCancel(){
				this.hiddenAll()
				uni.showTabBar({animation:true})
			},
			tabBarHide(){
				this.hiddenAll()
				uni.showTabBar({animation:true})
				
			},
			sortList(){
				// 获取子组件的数据并且对他进行排序
				this.$refs.BookCard.sortData()
			}
			
			},
		watch:{
			checkedbooks(news,old){
				let elm = document.getElementById("buttoms").firstElementChild
				this.$animationUtils.Animation(elm,{"bottom":0})
			}
		}
	}
</script>

<style>
	.toba{
		background-color: red;
		width: 100%;
		height: 3vh;
		margin-top: 1vh;
		
	}
	.center{
		/* background-color: #666; */
		overflow: hidden;
		position: relative;
		height: 100%;
	}
	.title{
		color: #CCCCCC;
	}
	.topbar{
		display: flex;
		justify-content: space-around;
	}
	.ai-center{
		margin-top: 2vh;
	}
	.text-white{
		color: #666;
		margin-left: 1vh;
		font-size: 2vh;
	}
	
	
	/* 弹出框组件 */
	
</style>
